---
id: use-spacing-helpers
title: useSpacingHelpers
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { defaultTabsProps } from '../../core/components';

`useSpacingHelpers` returns two functions: `multiply` and `divide` allowing to either multiply or divide a value by the `spacing` value passed to `StacksProvider`.

### TypeScript

```typescript
const useSpacingHelpers: () => {
  readonly multiply: (value: number) => number
  readonly divide: (value: number) => number
}
```

### ReScript

```typescript
type spacingHelpers = {
  multiply: (. float) => float,
  divide: (. float) => float,
}

let useSpacingHelpers: unit => spacingHelpers
```

### Basic usage

```jsx live showCode
const styles = StyleSheet.create({
  root: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
    alignItems: 'center',
  },
})

const CustomBox = props => {
  const { marginBottom, padding, children } = props
  const { multiply } = useSpacingHelpers()

  return (
    <View style={[styles.root, { marginBottom: multiply(marginBottom), padding: multiply(padding) }]}>
      <Typography variant="body">{children}</Typography>
    </View>
  )
}

const App = () => {
  return (
    <StacksProvider spacing={4}>
      <CustomBox marginBottom={4} padding={4}>Hello</CustomBox>
      <CustomBox padding={8}>World</CustomBox>
    </StacksProvider>
  )
}

render(<App />)
```
